<template>

  <div class="tab " >
    <div class="tab-item" >
      <router-link  to="/" replace>首页</router-link>
    </div>
    <div class="tab-item">
      <router-link tag="div" to="#" replace>攻略中心</router-link>
    </div>
    <div class="tab-item">
      <router-link tag="div" to="#" replace>赛事中心</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: ''
}
</script>

<style lang="scss" scoped>
  .tab{
    margin-top: .9rem;
    height: .84rem;
    line-height: .84rem;
    background-color: #db9e3f;
    .tab-item{
      float: left;
      width: 33.33333%;
      text-align :center;
      font-size :.28rem;
      color: white;
      a{
        display: block;
        position: relative;
        color: #7e8c8d;
        &.router-link-active{
          color: white;
          &::after{
            content: '';
            position :absolute;
            left :50%;
            bottom: .08rem;
            width :.7rem;
            height: .06rem;
            background: white;
            transform: translateX(-50%);
          }
        }
      }

    }
  }

</style>
